<template>
  <div>
    <a-segmented
      v-model:value="value"
      :options="data"
      block
      size="large" 
    >

      <template #label="{ value: val, payload = {} }">
        <div style="padding: 4px 4px">
          <template v-if="payload.icon">
            <a-avatar
              :src="payload.src"
              :style="payload.style"
            >
              <template #icon>
                <component :is="payload.icon" />
              </template>
              {{ payload.content }}
            </a-avatar>
          </template>
          <template v-else>
            <a-avatar
              :src="payload.src"
              :style="payload.style"
            >
              {{ payload.content }}
            </a-avatar>
          </template>
          <div>{{ val }}</div>
        </div>
      </template>
    </a-segmented>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      data: [{
        value: 'user1',
        payload: {
          src: 'https://joeschmoe.io/api/v1/random',
          style: {
            backgroundColor: '#f56a00',
          },
        },
      },
      {
        value: 'user2',
        payload: {
          style: {
            backgroundColor: '#f56a00',
          },
          content: 'K',
        },
      },
      {
        value: 'user3',
        payload: {

          style: {
            backgroundColor: '#f56a00',
          },
        },
      },],
      value: 0,
    }
  },
  created() { },
  mounted() {
    this.value = 'user1'
  },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
